<script setup>
import HeadShow from './components/HeadShow.vue'
import MainShow from './components/MainShow.vue'
import InsertWindow from "./components/InsertWindow.vue"
import {ref} from "vue";
import axios from "axios";

const image_list = ref([])

axios.get("/api/wardrobePlus/show/").then((resp) => {
  if (resp.status !== 200) {
    ElMessage.error("初始化失败，请检查网络连接！")
  } else {
    image_list.value = []
    for (const datum of resp.data.cloth_list) {
      image_list.value.push({src: "/api/static/images/" + datum.cloth_id + "_small.JPG", clothInfo: datum})
    }
  }
})

const is_open_insert_window = ref(0)

const handle_image_list = (data) => {
  image_list.value = data
}
const isMobile = ref(/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent || navigator.vendor || window.opera))
const handleOpenInsertWindow = () => {
  is_open_insert_window.value = is_open_insert_window.value + 1
}

</script>
<template>
  <div>

    <HeadShow :isMobile="isMobile" @get_image_list="handle_image_list"
              @OpenInsertWindow="handleOpenInsertWindow"></HeadShow>
    <MainShow :isMobile="isMobile" v-if="image_list.length !== 0" :image_list="image_list"></MainShow>
    <el-empty v-else :image-size="350" description="无相关数据"/>
    <InsertWindow :isMobile="isMobile" :is_open_insert_window="is_open_insert_window"></InsertWindow>

  </div>
</template>

